<template>
	<div class="searchInput">
		<input
			type="text"
			placeholder="输入任何你心情的关键词 ..."
			placeholder-class="input-placeholder"
      v-model="musicInfo"
      @force="toMusicSearch" />
		<i
			class="iconfont icon-sousuo"
			@click="toMusicList"></i>
	</div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
/** 搜索框输入内容 */
const musicInfo = ref<string>('');
/** 跳转搜索音乐页 */
const toMusicSearch = () => {};
/** 跳转音乐列表页 */
const toMusicList = () => {};
</script>

<style lang="scss" scoped>
.searchInput {
	position: relative;
	width: 100%;
	height: 100rpx;
	border-radius: 100rpx;
	box-shadow: 0 0 20rpx #f0f0f0;
	overflow: hidden;

	input {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		padding-right: 100rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	i {
		position: absolute;
		top: 50%;
		right: 40rpx;
		transform: translateY(-50%);
		font-size: 20px;
	}
}

.input-placeholder {
	color: #bec1bf;
}
</style>
